<template>
  <div style="width: 100%;height: 30px"></div>
  <div class="parts analysis-home">
    <div class="report">
      <div class="left-part">
        <div class="wrapper-title">AI{{$t('日报')}}/{{$t('周报')}}{{type}}</div>
        <div class="wrapper-filter">
          <el-segmented v-model="type" :options="options" size="large">
            <template #default="{ item }">
              <div>{{ $t(item.title) }}</div>
            </template>
          </el-segmented>
<!--          <el-date-picker-->
<!--                  style="width: 150px;margin-left: 30px"-->
<!--                  v-model="time2"-->
<!--                  type="date"-->
<!--                  placeholder="选择日期"-->
<!--          />-->
        </div>
        <div class="content-wrapper green">
          <div class="border"></div>
          <div class="title">
            <span class="t1">
              <span class="t2" v-if="type == 'day'">AI {{$t('日报')}}</span>
              <span class="t2" v-if="type == 'week'">AI {{$t('周报')}}</span>
            </span>
            <span class="t2" v-if="type == 'day'">{{dayReport?.reportDate}}</span>
            <span class="t2" v-if="type == 'week'">{{weekReport?.reportDate}}</span>
          </div>
          <div class="content" v-if="type == 'day'">
            {{dayReport?.reportContent}}
          </div>
          <div class="content" v-if="type == 'week'">
            {{weekReport?.reportContent}}
          </div>
        </div>

      </div>
      <div class="right-part">
        <div class="wrapper-title">{{$t('AI智能处置')}}</div>
        <div class="wrapper-filter">
          <div class="title">
            {{setReport?.eventDesc}}
<!--            {{$t('事故发生后，通过实时监测和智能分析自动调取相关资料和指导步骤，提供给相关人员从而加快事故处置的速度和准确性')}}-->
          </div>
        </div>
        <div class="content-wrapper gold">
          <div class="border"></div>
          <div class="title">
            <span class="t1">{{$t('AI智能处置')}}</span>
          </div>
          <div class="content">
            {{setReport?.aiDisposal}}
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="parts">
    <div class="wrapper-title">{{$t('AI趋势分析')}}<span class="sub">{{$t('当前状态')}}：{{$t(levelStatus)}}</span></div>
    <div class="charts" id="charts"></div>
    <div class="chart-name">{{$t('AI曲线预测')}}</div>
  </div>
  <div class="parts">
    <div class="wrapper-title">
      {{$t('AI违规统计')}}
      <div class="more" @click="goOverview">{{$t('查看全部')}}<i class="iconfont icon-right-1-copy"></i></div>
    </div>
    <div class="statistics">
      <div class="left">
        <div class="title">{{$t('AI事件归类')}}</div>
        <div class="list">
          <div class="item" :key="idx" :style="{background: `rgba(30, 200, 98, ${1 - idx / typeCount.length})`}" v-for="(item, idx) in typeCount">
            <div class="name">{{item.label}}</div>
            <div class="count">{{item.num}}</div>
          </div>
        </div>
      </div>
      <div class="line"></div>
      <div class="right">
        <div class="title">{{$t('AI严重程度判断')}}</div>
        <div class="list" >
          <div class="item" :class="[idx == 0?'red': '', idx == 1?'yellow': '', idx == 2?'green': '' ]" v-for="(item, idx) in levelCount">
            <div class="border"></div>
            <div class="name">{{item.label}}</div>
            <div class="count">{{item.num}}</div>
          </div>

        </div>
      </div>
    </div>
  </div>
  <div class="parts">
    <div class="wrapper-title">
      {{$t('人员管理')}}
    </div>
    <div class="member">
      <div class="left-part" @click="goMember">
        <div class="content-wrapper gold">
          <div class="border"></div>
          <i class="iconfont icon-renyuanliebiao"></i>
          <span>{{$t('人员列表管理')}}</span>
        </div>
      </div>
      <div class="right-part" @click="goMemberAdd">
        <div class="content-wrapper gold">
          <div class="border"></div>
          <i class="iconfont icon-tianjiahaoyou"></i>
          <span>{{$t('录入新成员')}}</span>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import * as echarts from 'echarts';
  import * as api from '@/api';

  export default {
    name: "home",
    data() {
      return {
        type: 'day',
        options: [
          {
            title: '日报',
            value: 'day'
          },
          {
            title: '周报',
            value: 'week'
          }
        ],
        time2: '',
        axis: [],
        data: [],
        rate: 0,
        dayReport: {
          "id": 0,
          "creator": 0,
          "createDate": "2019-08-24T14:15:22.123Z",
          "delFlag": "",
          "reportName": "",
          "reportType": "",
          "reportDate": "",
          "reportContent": "",
          "reportContentEn": "",
          "reportDispose": "",
          "companyId": 0
        },
        weekReport: {
          "id": 0,
          "creator": 0,
          "createDate": "2019-08-24T14:15:22.123Z",
          "delFlag": "",
          "reportName": "",
          "reportType": "",
          "reportDate": "",
          "reportContent": "",
          "reportContentEn": "",
          "reportDispose": "",
          "companyId": 0
        },
        setReport: {
          "id": 0,
          "creator": 0,
          "createDate": "2019-08-24T14:15:22.123Z",
          "delFlag": "",
          "personId": 0,
          "eventName": "",
          "eventTypeId": 0,
          "eventLevel": "",
          "eventScore": 0,
          "eventDesc": "",
          "eventTime": "2019-08-24T14:15:22.123Z",
          "eventDate": "",
          "eventStatus": "",
          "videoId": 0,
          "eventImg": "",
          "aiDisposal": "",
          "aiDisposalEn": "",
          "companyId": 0
        },
        typeCount: [],
        levelCount: [],
        levelStatus: '轻度'
      }
    },
    methods: {
      goMember() {
        this.$emit('changeTab', 'member')
      },
      goMemberAdd() {
        this.$emit('changeTab', 'memberAdd')
      },
      goOverview() {
        this.$router.push({
          name: 'Overview'
        })
      },
      async getData() {
        try {
          const {data} = await api.aiAnalysis();
          if (!data.code) {
            let arr = data.data
            let axis1 = arr[0].seriesData.map(item => item.eventDate);
            let axis2 = arr[1].seriesData.map(item => item.eventDate);
            this.axis = axis1.concat(axis2);
            let data1 = arr[0].seriesData.map(item => item.eventCount);
            let data2 = arr[1].seriesData.map(item => item.eventCount);
            this.data = data1.concat(data2);
            this.rate = (data1.length - 1) / this.data.length
            setTimeout(() => {
              this.initCharts();
            }, 300)
          }
        } catch (e) {
          console.log(e)
        }
      },
      async getDayReport() {
        try {
          const {data} = await api.lastDailyReport();
          if (!data.code && data.data) {
            this.dayReport = data.data
          }
        } catch (e) {
          console.log(e)
        }
      },
      async getWeekReport() {
        try {
          const {data} = await api.lastWeeklyReport();
          if (!data.code && data.data) {
            this.weekReport = data.data
          }
        } catch (e) {
          console.log(e)
        }
      },
      async lastDisposal() {
        try {
          const {data} = await api.lastDisposal();
          if (!data.code && data.data) {
            this.setReport = data.data
          }
        } catch (e) {
          console.log(e)
        }
      },
      async eventTypeStatistics() {
        try {
          const {data} = await api.eventTypeStatistics();
          if (!data.code && data.data) {
            this.typeCount = data.data
          }
        } catch (e) {
          console.log(e)
        }
      },
      async eventLevelStatistics() {
        try {
          const {data} = await api.eventLevelStatistics();
          if (!data.code && data.data) {
            this.levelCount = data.data
          }
        } catch (e) {
          console.log(e)
        }
      },
      initCharts() {
        let that = this;
        var myChart = echarts.init(document.getElementById('charts'));
        myChart.setOption({
          tooltip: {
            trigger: 'axis',
            showContent: false,
          },
          grid: {
            top: '5%',
            bottom: '0%',
            left: '80',
            right: '100',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: that.axis,
            boundaryGap: false,
            axisTick: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#666',
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                fontSize: 12,
                color: 'rgba(234, 234, 234, 1)',
                fontFamily: 'PingFang SC',
                lineHeight: 24
              }
            },
          },
          yAxis: {
            type: 'value',
            axisLine: {
              show: true,
              lineStyle: {
                color: '#666',
              }
            },
            splitLine: {
              lineStyle: {
                color: '#333',
                type: 'dashed'
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                fontSize: 12,
                color: 'rgba(234, 234, 234, 1)',
                fontFamily: 'PingFang SC',
                lineHeight: 24
              }
            },
          },
          // visualMap: {
          //   show: false,
          //   dimension: 0,
          //   pieces: [
          //     {
          //       lte: 3,
          //       color: 'green'
          //     },
          //     {
          //       gt: 3,
          //       lte: 7,
          //       color: 'red'
          //     },
          //   ]
          // },
          series: [
            {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                {
                  offset: that.rate, color: 'rgba(30, 200, 98, 1)' // 0% 处的颜色
                }, {
                  offset: 1, color: '#007bff' // 100% 处的颜色
                }
                ],
                global: false // 缺省为 false
              },
              type: 'line',
              smooth: true,
              lineStyle: {
                width: 4,
              },
              connectNulls: true,
              showSymbol: false,
              symbol: 'image://',
              symbolSize: 22,
              data: that.data,
            },
            // {
            //   color: {
            //     type: 'linear',
            //     x: 0,
            //     y: 0,
            //     x2: 1,
            //     y2: 0,
            //     colorStops: [{
            //       offset: 0, color: 'rgba(30, 200, 98, 1)' // 0% 处的颜色
            //     }, {
            //       offset: 1, color: 'rgba(30, 200, 98, 0.1)' // 100% 处的颜色
            //     }],
            //     global: false // 缺省为 false
            //   },
            //   type: 'line',
            //   smooth: true,
            //   connectNulls: true,
            //   lineStyle: {
            //     width: 4,
            //     type: 'dashed'
            //   },
            //   showSymbol: false,
            //   symbol: 'image://',
            //   symbolSize: 22,
            //   data: that.data2,
            // },
          ],
        });
      }
    },
    mounted() {
      this.getData()
      this.getDayReport();
      this.getWeekReport()
      this.lastDisposal();
      this.eventTypeStatistics();
      this.eventLevelStatistics();
    }
  }
</script>

<style scoped lang="scss">
  .wrapper-title{
    font-weight: 500;
    font-size: 24px;
    color: #FFFFFF;
    line-height: 38px;
    .sub{
      font-weight: 400;
      font-size: 14px;
      color: #EAEAEA;
      margin-left: 24px;
    }
    .more{
      float: right;
      font-weight: 400;
      font-size: 16px;
      color: #DFDFDF;
      display: flex;
      align-items: center;
      cursor: pointer;
      i{
        font-size: 10px;
        margin-left: 5px;
      }

    }
  }
  .wrapper-filter{
    margin-top: 6px;
    margin-bottom: 4px;
    height: 60px;
    .title{
      font-weight: 400;
      font-size: 12px;
      color: #EAEAEA;
      line-height: 20px;
    }
  }

  .parts{
    margin-bottom: 40px;
  }
  .report{
    display: flex;
    justify-content: space-between;
    .left-part{
      margin-right: 50px;
      width: calc((100% - 50px) / 2);
    }
    .right-part{
      width: calc((100% - 50px) / 2);
    }


    .content-wrapper{
      box-shadow: 20px 20px 30px 0px rgba(0,0,0,0.65);
      width: 100%;
      height: 232px;
      position: relative;
      border-radius: 32px;
      @include clear;
      .border{
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;

        border: 1px solid transparent;
        border-radius: 32px;
        box-sizing: border-box;
        background-clip: padding-box, border-box;
        background-origin: padding-box, border-box;
        pointer-events: none;
        transition: 0.6s ease;
        background-size: 100% 100%;
      }
      .title{
        width: 100%;
        height: 24px;
        display: flex;
        align-items: center;
        position: relative;
        z-index: 5;
        box-sizing: border-box;
        padding: 0px 40px;
        margin-bottom: 16px;
        margin-top: 20px;
        .t1{
          font-weight: 500;
          font-size: 18px;
          color: #39EA88;

          margin-right: 20px;
        }
        .t2{
          font-weight: 400;
          font-size: 12px;
          color: #EAEAEA;

        }
      }
      .content{
        font-weight: 400;
        font-size: 16px;
        color: #D8D8D8;
        line-height: 19px;
        position: relative;
        z-index: 5;
        box-sizing: border-box;
        padding: 0px 40px;
      }
      &:hover{
        .border{
          background-size: 100% 300%;
        }
      }
    }

    .green{
      .border{
        background-image: linear-gradient(24deg, #000 55%, rgb(31,52,45)), linear-gradient(24deg, #000 55%, #1FD267);
      }
    }
    .gold{
      .border{
        background-image: linear-gradient(24deg, #000 55%, rgb(44,42,26)), linear-gradient(24deg, #000 55%, #FFF133);
      }
    }

  }

  .charts{
    width: 100%;
    height: 250px;
    margin-top: 30px;
  }
  .chart-name{
    width: 100%;
    text-align: center;

    font-weight: 400;
    font-size: 16px;
    color: #FFFFFF;
    margin-top: 10px;

  }

  .statistics{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    .line{
      height: 196px;
      width: 1px;
      background: #676767;
      margin: 0 64px;
      margin-top: 40px;
    }
    .left{
      width: 505px;
      padding-top: 30px;
      .list{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;

        .item{
          display: inline-block;
          width: 131px;
          height: 131px;
          background: #1EC862;
          border-radius: 50%;
          margin-bottom: 20px;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-wrap: wrap;
          box-sizing: border-box;
          padding: 30px 0px;
          .name{
            width: 100%;
            font-weight: 500;
            color: #EAEAEA;
            font-size: 18px;
            text-align: center;
            box-sizing: border-box;
            padding: 0 10%;
          }
          .count{
            width: 100%;
            font-weight: 500;
            color: #EAEAEA;
            font-size: 18px;
            text-align: center;
          }
        }

      }

    }
    .right{
      padding-top: 30px;
      width: 505px;
      .list{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .item{
          width: 137px;
          height: 128px;
          border-radius: 32px 32px 32px 32px;
          border: 1px solid;
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-wrap: wrap;
          box-sizing: border-box;
          padding: 30px 0px;
          .border{
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            border: 1px solid transparent;
            border-radius: 32px;
            box-sizing: border-box;
            background-clip: padding-box, border-box;
            background-origin: padding-box, border-box;
            pointer-events: none;
          }

          .name{
            width: 100%;
            font-weight: 500;
            color: #EAEAEA;
            font-size: 18px;
            text-align: center;
            box-sizing: border-box;
            padding: 0 10%;
            position: relative;
            z-index: 5;


          }
          .count{
            width: 100%;
            font-weight: 500;
            color: #EAEAEA;
            font-size: 18px;
            text-align: center;
            position: relative;
            z-index: 5;
          }
          span{

          }
        }


        .red{
          .border{
            background-image: linear-gradient(180deg, #FF7665 0%, #AD1B1B 100%), linear-gradient(18deg, rgba(110, 51, 43, 1) 30%, rgba(255, 206, 206, 1) 100%);
          }
        }
        .yellow{
          .border{
            background-image: linear-gradient(180deg, #95C81E 0%, #93B714 46%, #91A308 100%), linear-gradient(18deg, rgba(75, 85, 18, 1) 30%, rgba(245, 255, 64, 1) 100%);
          }
        }
        .green{
          .border{
            background-image: linear-gradient(180deg, #27FF7E 0%, #00732E 100%), linear-gradient(18deg, rgba(13, 104, 49, 1) 30%,  rgba(64, 255, 140, 1));
          }
        }
      }
    }
    .title{
      width: 100%;
      text-align: center;
      font-weight: 400;
      font-size: 16px;
      color: #EAEAEA;
      line-height: 20px;
      height: 20px;
      margin-bottom: 30px;
    }

  }

  .member{
    width: 100%;

    margin-top: 30px;
    display: flex;
    justify-content: space-between;
    .left-part{
      float: left;
      cursor: pointer;
      width: calc((100% - 50px) / 2);
    }
    .right-part{
      float: left;
      cursor: pointer;
      width: calc((100% - 50px) / 2);
    }
    .content-wrapper{
      width: 100%;
      box-shadow: 20px 20px 30px 0px rgba(0,0,0,0.65);
      height: 138px;
      position: relative;
      border-radius: 32px;
      @include clear;
      .border{
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        border: 1px solid transparent;
        border-radius: 32px;
        box-sizing: border-box;
        background-clip: padding-box, border-box;
        background-origin: padding-box, border-box;
        pointer-events: none;
        transition: 0.6s ease;
        background-size: 100% 100%;
      }
      &:hover{
        .border{
          background-size: 100% 500%;
        }
      }
      display: flex;
      align-items: center;
      justify-content: center;
      i{
        font-size: 34px;
        color: $color;
        position: relative;
        z-index: 5;
        margin-right: 24px;
      }
      span{
        font-weight: 500;
        font-size: 20px;
        color: #FFFFFF;
        position: relative;
        z-index: 5;

      }
    }
    .gold{
      .border{
        background-image: linear-gradient(24deg, #000 55%, rgb(44,42,26)), linear-gradient(24deg, #000 70%, #FFF133);
      }
    }
  }
</style>
